<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增培训信息')"/>
    <th:block th:include="include :: select2-css"/>
</head>
<body>
<div class="main-content">
    <form id="form-train-add" class="form-horizontal" AUTOCOMPLETE="OFF">
        <h4 class="form-header h4">项目基础信息</h4>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">集团：</label>
                    <div class="col-sm-8">
                        <input class="form-control" id="comp" name="comp" type="text"/>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">所属中心：</label>
                    <div class="col-sm-8">
                        <input class="form-control" id="center" name="center" type="text"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">培训项目：</label>
                    <div class="col-sm-8">
                        <input class="form-control" id="trainingProgram" name="trainingProgram" type="text"/>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">培训目的：</label>
                    <div class="col-sm-8">
                        <input class="form-control" id="trainingPurpose" name="trainingPurpose" type="text"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">学员描述：</label>
                    <div class="col-sm-8">
                        <input class="form-control" id="studentDescription" name="studentDescription" type="text"/>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">学员层级：</label>
                    <div class="col-sm-8">
                        <input class="form-control" id="studentLevel" name="studentLevel" type="text"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">所属专业线：</label>
                    <div class="col-sm-8">
                        <input class="form-control" id="professionalLine" name="professionalLine" type="text"/>
                    </div>
                </div>
            </div>
        </div>

        <h4 class="form-header h4">实施信息</h4>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">开始时间：</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" name="beginDate" id="laydate-demo-1">
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">结束时间：</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" name="endDate" id="laydate-demo-2">
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">实施时间：</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" name="implementationTime" id="laydate-demo-3">
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">参加方式：</label>
                    <div class="col-sm-8">
                        <input name="participationMode" id="participationMode" class="form-control"
                               type="text"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">专业类：</label>
                    <div class="col-sm-8">
                        <input name="professional" id="professional" class="form-control"
                               type="text"/>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">课时(时)：</label>
                    <div class="col-sm-8">
                        <input name="classHour" id="classHour" class="form-control"
                               type="text"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">总课时(时)：</label>
                    <div class="col-sm-8">
                        <input name="totalClassHours" id="totalClassHours" class="form-control"
                               type="text"/>
                    </div>
                </div>
            </div>
        </div>

        <h4 class="form-header h4">讲师信息</h4>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">讲师类型：</label>
                    <div class="col-sm-8">
                        <select id="inside" name="inside" class="form-control m-b">
                            <option value="">请选择</option>
                            <option value="内部">内部</option>
                            <option value="外部">外部</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">讲师所在部门/机构：</label>
                    <div class="col-sm-8">
                        <input name="lecturer" id="lecturer" class="form-control"
                               type="text"/>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">讲师姓名：</label>
                    <div class="col-sm-8">
                        <input name="instructorName" id="instructorName"
                               onclick="getInstructorName()" class="form-control"
                               type="text" required>
                    </div>
                </div>
            </div>
        </div>

        <h4 class="form-header h4">培训费用</h4>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">餐饮及场地：</label>
                    <div class="col-sm-8">
                        <input name="diningAndVenue" id="diningAndVenue" class="form-control"
                               type="text"/>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">师资：</label>
                    <div class="col-sm-8">
                        <input name="teachers" id="teachers" class="form-control"
                               type="text"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">其它：</label>
                    <div class="col-sm-8">
                        <input name="other" id="other" class="form-control"
                               type="text"/>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">合计：</label>
                    <div class="col-sm-8">
                        <input name="total" id="total" class="form-control"
                               type="text"/>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">备注：</label>
                    <div class="col-sm-8">
                        <input name="remark" id="remark" class="form-control"
                               type="text"/>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>


<th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-js"/>
<th:block th:include="include :: datetimepicker-js"/>

<script th:inline="javascript">

    var prefix = ctx + "trainManage";

    $(function () {


        $("#datetimepicker-demo-3").datetimepicker({
            format: "yyyy-mm-dd hh:ii:ss",
            autoclose: true
        });

        <!-- laydate示例 -->
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            laydate.render({
                elem: '#laydate-demo-3',
                type: 'datetime',
                trigger: 'click'
            });
        });

        layui.use('laydate', function () {
            var laydate = layui.laydate;
            laydate.render({
                elem: '#laydate-demo-1',
                type: 'datetime',
                trigger: 'click'
            });
        });

        layui.use('laydate', function () {
            var laydate = layui.laydate;
            laydate.render({
                elem: '#laydate-demo-2',
                type: 'datetime',
                trigger: 'click'
            });
        });
    });

    function getInstructorName() {
        var type = $("#inside").val();
        if (type == "内部") {
            $.modal.open("选择讲师", prefix + "/getInstructorName");
        }
    }

    function submitHandler() {
        if ($.validate.form()) {
            var data = $("#form-train-add").serializeArray();
            $.operate.save(prefix + "/add", data);
        }
    }


</script>
</body>
</html>
